<template>
	<scroll-view :style="{height:scrollHeight}" scroll-y="true">
		<view class="shopping">
			<view class="search" :class="configs.beginning == 'user'?'searchUser':''">
				<view class="content" @tap="toSearch">
					<image class="search-img"
						:src="url+'icon-71.png'" mode=""></image>
					<input class="search-input" disabled placeholder="输入关键词搜索商品" />
				</view>
				<image @tap="toShare" class="car" :src="url+'icon-88.png'"mode=""></image>
				<image @tap="toCart" v-if="configs.beginning == 'user'" class="car" :src="url+'icon-173.png'"mode=""></image>
			</view>
			<!-- 轮播图 -->
			<view class="dots" v-if="bannerFun.list.length != 0">
				<swiper class="home-swiper-box" circular 
					:indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
					@change="bannerFun.change">
					<swiper-item v-for="(item, index) in bannerFun.list" :key="`list-${index}`" @tap="navigate.toDetail(item)">
						<image class="item-img-box" :class=" bannerFun.current === index ? 'active' : 'quiet'" :src="item.pic" mode=""></image>
					</swiper-item>
				</swiper>
				<view class="dots-content">
					<view :class="['dots-item', bannerFun.current == index ? 'dots-item-active' : '']"
						v-for="(item, index) in bannerFun.list" :key="`lists-${index}`"></view>
				</view>
			</view>
		    <!-- 品牌 -->
			<view class="brandList" v-if=" navigate.list.length!=0">
				<scroll-view scroll-x="true" class="scroll" show-scrollbar="false">
					<view v-for="item in navigate.list" :key="item.id" class="brandList_item" @tap="navigate.toDetail(item)"><image :src="item.icon"></image><text>{{item.title}}</text></view>
				</scroll-view>
			</view>
			<!-- 分类 -->
			<view class="classification" >
				<view class="classification_item" v-for="item in homePageOtherClass.list" :key="item.id" >
					<image v-if="item.advertisingMap" class="banner" :src="item.advertisingMap" mode="" @tap="homePageOtherClass.toDetail(item.id)"></image>
					<view v-else class="hotSellingItems_title" @tap="homePageOtherClass.toDetail(item.id)">
						<text class="name">{{item.name}}</text>
						<view>更多 <uni-icons type="right" :color="'#808080'" :size="12"></uni-icons></view>
					</view>
					<view class="classification_content">
						<scroll-view scroll-x="true" class="shop_list" show-scrollbar="false">
							<view class="shop_item" v-for="itemTwo in item.arr" @tap.stop="homePageOtherClass.toProductDetails(itemTwo.id)">
								<image :src="itemTwo.displayPic" mode=""></image>
								<view class="shop_item_name xjs-line-one"><text v-if="itemTwo.saleType==3">预售</text>{{itemTwo.name}}</view>
								<view class="price">¥{{itemTwo.skuPrice}}</view>
							</view>
						</scroll-view>
						<view class="see" v-if="item.advertisingMap" @tap="homePageOtherClass.toDetail(item.id)">查看更多 <uni-icons type="right" :color="'#5C5E5E'" :size="12"></uni-icons></view>
					</view>
				</view>
			</view>
			<!-- 导航条 -->
			<view class="nav">
				<scroll-view class="nav-scroll" show-scrollbar="false" :scroll-with-animation='true' scroll-x="true">
					<view v-for="(item,index) in brandsList.navList" class="scroll-inner" :key="index"
						@click="brandsList.btnNav(item.id,index)" :class="brandsList.navIndex==index?'show':''">
						{{item.brandsName}}
						<image :src="url + 'icon-101.png'"></image>
					</view>
				</scroll-view>
			</view>
			<scroll-view :scroll-y="true" show-scrollbar="false" :scroll-with-animation="true" class="hei" @scrolltolower="brandsList.lower">
				<view class="contentContent" style="padding-bottom: calc(32rpx + var(--status-bar-height));">
					<shopList :isLine="true" :list='brandsList.shopList'></shopList>
				</view>
			</scroll-view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import configs from '@/config';
	import api from '@/api';
	import { ref, reactive, onMounted, nextTick, computed } from 'vue';
	const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
	const props = withDefaults(
		defineProps<{
			scrollHeight ?: any
		}>(),
		{
			scrollHeight: ""
		}
	)
	const init = (() => {
		bannerFun.getBanner();
		navigate.getList();
		homePageOtherClass.getList();
		brandsList.navIndex = 0
		brandsList.page = 1
		brandsList.getNavList()
	});
	defineExpose({
		init
	})
	const toSearch = ()=>{
		uni.navigateTo({
			url:'/pages/shopping/search/index'
		})
	}
	const toCart = () =>{
		uni.navigateTo({
			url:'/pages/shopping/cart/index'
		})
	}
	const channel = ref(3)  //展示渠道 1-app , 2-h5, 3-小程序  逗号分隔
	//轮播图
	const bannerFun = reactive({
		list: [],
		current: 0,
		change: (event) => {
			bannerFun.current = event.detail.current;
		},
		getBanner: async () => {
			const res : any = await api({
				method: 'get',
				prefix: 'acc',
				url: `/app_common_contents/v2/list`
			});
			bannerFun.list = res.data.shoppingDisplayPics || [];
			
		}
	});
	const toShare = ()=>{
		uni.navigateTo({
			url: `/pages/share/workCode/index?type=7`
		});
	}
	// 顶部导航
	const navigate = reactive({
		list:[],
		getList: async()=>{
			// #ifdef APP
			channel.value = 1
			// #endif
			// #ifdef MP-WEIXIN
			channel.value = 3
			// #endif
			const res: any = await api({
				method: 'get',
				url: `/mall/content/navigate/list/${channel.value}`,
			})
			navigate.list = res.data
			if(navigate.list.length){
				navigate.list.forEach(item=>{
					item.tapTo = item.value
					item.tapType = item.jumpType
				})
			}
		},
		toDetail:async(obj:any)=>{
			console.log(obj.type,obj.tapType)
			// 顶部导航type：0-内部跳转 , 1-外部跳转
			// jumpType跳转类型：shop-商城店铺主页,goodsInfo-商城商品详情,classInfo-商城分类详情,
			// serviceInfo-服务详情,course-课程详情,exam-考试详情,other-外部链接,petsitter-陪宠师招募,school-商学院首页,diyInfo-自设详情
			// 参数值value：shop-填写店铺id,goodsInfo-商城商品id,classInfo-商城分类id,
			// serviceInfo-服务id,course-课程id,exam-考试id,other-外部链接地址,petsitter-陪宠师招募无参数值配置,school-商学院首页无参数值配置,diyInfo-自设详情(自设详情标题以及详情)
			if (obj.type==1) {
				uni.navigateTo({
					url:'/pages/setting/webView/index?url=' + obj.tapTo
				})
			   return
			}
			console.log(obj)
			switch (obj.tapType) {
				case 'shop': //商城店铺主页
				console.log(obj)
					uni.navigateTo({
						url:'/pages/shopping/shop/index?brands=' + obj.tapTo
					})
					break;
				case 'goodsInfo': //商城商品详情
					uni.navigateTo({
						url:'/pages/shopping/productDetails/index?goodsId=' + obj.tapTo
					})
					break;
				case 'classInfo': //商城分类详情
					homePageOtherClass.toDetail(obj.tapTo)
					break;
				case 'serviceInfo': //服务详情
					const res1 : any = await api({
						method: 'get',
						url: `/mall/studio/getUserStudioId`
					});
					let studioId = res1.data;
					uni.navigateTo({
						url: `/pages/serviceDetails/details/index?studioGoodsId=${obj.tapTo}&studioId=${studioId}`
					})
					break;
				case 'course': //课程详情
					uni.navigateTo({
						url:`/pages/businessSchool/courseDetails/courseDetails?courseId=${obj.tapTo}`
					})
					break;
				case 'other': //外部链接
				    console.log(obj)
					uni.navigateTo({
						url:'/pages/setting/webView/index?url=' + obj.tapTo
					})
					break;
				case 'petsitter': //申请陪宠师
					uni.navigateTo({
						url:'/pages/applyPetTeacher/index/index'
					})
					break;
				case 'school': //商学院首页
					uni.navigateTo({
						url:'/pages/businessSchool/index/index'
					})
					break;
				case 'diyInfo': //自设详情
				    console.log(obj.title)
					uni.navigateTo({
						url:`/pages/shopping/kongDetails/kongDetails?title=${obj.title}&id=${obj.id}`
					})
					break;
				case 'page': //页面模块
					uni.navigateTo({
						url:obj.tapTo
					})
					break;
				case 'stu': //工作室
					const res2 : any = await api({
						method: 'get',
						url: `/mall/studio/getUserStudioId`
					});
				    let studioIds = res2.data;
					uni.navigateTo({
						url: '/pages/studio/petCompanionTeacherIndex/index?userId=' + obj.tapTo + '&studioId=' + studioIds
					})
					break;
			}
			
		}
	})
	
	//推荐分类
	const homePageOtherClass = reactive({
		list:[],
		getList: async()=>{
			const res: any = await api({
				method: 'get',
				url: `/mall/shopping/goods/goods-group/getHomePageOtherClass`,
			})
			homePageOtherClass.list = res.data
			if(res.data){
				homePageOtherClass.list.forEach(async item=>{
					item.arr = await homePageOtherClass.getListDeta(item.id)
				})
			}
		},
		getListDeta: async(groupId:string)=>{
			const res: any = await api({
				method: 'get',
				url: `/mall/shopping/goods/goods-group/getGoodList?page=1&limit=10&groupId=${groupId}`,
			})
			res.data.records.forEach(item=>{
				item.displayPic = homePageOtherClass.img(item.displayPic)
			})
			return res.data.records
		},
		toDetail:(id:string)=>{
			uni.navigateTo({
				url:`/pages/shopping/classificationDetails/index?groupId=${id}`
			})
		},
		toProductDetails:(id:string)=>{
			uni.navigateTo({
				url:`/pages/shopping/productDetails/index?goodsId=${id}`
			})
		},
		img:(str:string)=>{
			let url = ''
			if(str.indexOf('|')!=-1){
				console.log(str.split('|'))
				url = str.split('|')[0]
			}else{
				url = str
			}
			return url
		}
	})
	
	//商品推荐
	const brandsList = reactive({
		navList:[],
		navIndex: 0,//当前导航条高亮滑块
		brandsId:'',
		shopList:[],
		page:1,
		isQing:true,
		getNavList: async()=>{
			const res: any = await api({
				method: 'get',
				url: `/mall/shopping/goods/brands/list`,
			})
			brandsList.navList = res.data
			brandsList.brandsId = res.data[0].id
			brandsList.getList()
		},
		getList: async()=>{
			const res: any = await api({
				method: 'get',
				url: `/mall/shopping/goods/goods-group/getBrandsGoodsList?page=${brandsList.page}&limit=10&brandsId=${brandsList.brandsId}`,
			})
			brandsList.shopList = brandsList.page==1?res.data.records:brandsList.shopList.concat(res.data.records)
			brandsList.isQing = brandsList.shopList>=res.data.total?false:true
		},
		lower:()=>{
			if(!brandsList.isQing) return
			brandsList.page++
			brandsList.getList()
		},
		btnNav:(brandsId:string,index:number)=>{
			brandsList.navIndex = index;
			brandsList.brandsId = brandsId
			brandsList.page = 1
			brandsList.getList()
		}
	})
</script>

<style lang="scss" scoped>
.shopping {
	line-height: 1;
	padding-top: 88rpx;
	.search {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		margin-bottom: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		z-index: 99;
		.content {
			display: flex;
			align-items: center;
			width: 606rpx;
			height: 72rpx;
			background: #F9F6F6;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			.search-img {
				width: 40rpx;
				height: 40rpx;
			}
			.search-input {
				font-size: 30rpx;
				color: #5C5E5E;
				width: 400rpx;
				margin-left: 24rpx;
			}
		}
		.car {
			width: 48rpx;
			height: 48rpx;
		}
	}
	.searchUser{
		.content{
			width: 546rpx;
		}
		.car:last-child{
			margin-left: 12rpx;
		}
	}
	.dots {
		position: relative;
		.home-swiper-box {
			width: 750rpx;
			height: 450rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.item-img-box {
				width: 750rpx;
				height: 450rpx;
				// border-radius: 24rpx;
			}
			// .active {
			// 	// 中间放大动画
			// 	transform: none;
			// 	transition: all 0.2s ease-in 0s;
			// }
			// .quiet {
			// 	// 两边缩小动画
			// 	transform: scale(0.85);
			// 	opacity: 0.4;
			// 	transition: all 0.5s ease-in 0s;
			// }
		}
		.dots-content {
			position: absolute;
			left: 0;
			bottom: 24rpx;
			width: 100%;
			text-align: center;

			.dots-item-active {
				width: 32rpx !important;
				height: 8rpx !important;
				background: #ffffff !important;
				border-radius: 200rpx 200rpx 200rpx 200rpx !important;
			}

			.dots-item {
				display: inline-block;
				margin: 0 8rpx;
				width: 8rpx;
				height: 8rpx;
				background: #cccccc;
				border-radius: 50%;
				transition: all 0.5s linear;
			}
		}
	}
}
.brandList{
	width: 100%;
	padding: 0 32rpx;
	margin: 40rpx 0 48rpx;
	box-sizing: border-box;
	
	.scroll{
		padding: 32rpx;
		border-radius: 24rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		white-space: nowrap;
	}
	.brandList_item{
		color: #5C5E5E;
		font-size: 26rpx;
		text-align: center;
		display: inline-block;
		margin-right: 48rpx;
		image{
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			margin-bottom: 24rpx;
		}
		text{display: block;width: 100%;text-align: center;}
	}
}
.classification{
	width: 100%;
	padding: 0 32rpx;
	margin-bottom: 48rpx;
	box-sizing: border-box;
	.classification_item{
		width: 100%;
		background: #fff;
		border-radius: 24rpx;
		margin-bottom: 48rpx;
		&:last-child{margin: 0;}
		.banner{
			width: 100%;
			height: 274rpx;
			border-radius: 24rpx 24rpx 0 0;
		}
		.classification_content{
			padding: 24rpx;
			box-sizing: border-box;
		}
		.hotSellingItems_title{
			font-size: 26rpx;
			color: #5C5E5E;
			padding: 40rpx 24rpx 8rpx;
			box-sizing: border-box;
			@include flex(center,space-between);
			.name{
				font-size: 36rpx;
				color: #202020;
				font-weight: bold;
			}
		}
		.shop_list{
			white-space: nowrap;
			.shop_item{
				width: 200rpx;
				display: inline-block;
				margin-right: 20rpx;
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
				view{
					width: 100%;
					display: block;
					text-align: center;
					font-weight: bold;
					font-size: 26rpx;
					color: #FF6084;
				}
				.shop_item_name{
					margin: 20rpx 0 12rpx;
					font-weight: normal;
					color: #1B2120;
					text{
						display: inline-block;
						color: #6363FF;
						font-size: 22rpx;
						margin-right: 4rpx;
						padding: 4rpx 8rpx;
						border-radius: 40rpx;
						box-sizing: border-box;
						border: 2rpx solid #6363FF;
					}
				}
			}
		}
		.see{
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			color: #5C5E5E;
			margin-top: 40rpx;
		}
	}
}

.nav{
	padding-left: 32rpx;
	box-sizing: border-box;
	margin-bottom: 24rpx;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 99;
	background-color: var(--pages-bg-color);
	.nav-scroll{
		white-space: nowrap;
		
	}
	.scroll-inner{
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
		display: inline-block;
		margin-right: 48rpx;
		font-size: 30rpx;
		color: #5C5E5E;
		image{
			width: 40rpx;
			height: 14rpx;
			margin-top: 4rpx;
			position: absolute;
			display: none;
			bottom: 0;
			left: 50%;
			margin-left: -24rpx;
		}
	}
	.show{
		font-weight: bold;
		font-size: 40rpx;
		color: #1B2120;
		image{display: block;}
	}
}
.hei{
	height: calc(100vh - 316rpx);
	padding: 0 32rpx;
	box-sizing: border-box;
}
::v-deep .uni-scroll-view::-webkit-scrollbar{
	display: none;
	width: 0 !important;
}
::v-deep .uni-scroll-view {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
</style>